<template>
    <div class="createScreen" v-loading="loadingShow">
        <div class="createScreen_content">
            <div class="createScreen_content_l">
                <div class="createScreen_content_l_t">同屏设置</div>
                <div class="createScreen_content_l_c" v-if="!isCreateScreen">
                    <div class="createScreen_content_l_c_t">
                        <div class="createScreen_content_l_c_t_t">房间类型</div>
                        <div class="createScreen_content_l_c_t_r">
                            <el-radio class="createScreen_content_l_c_t_r_my" v-model="radio" label="1"
                                text-color="#333333" fill="#fa7500">公共房间</el-radio>
                            <el-radio class="createScreen_content_l_c_t_r_my" v-model="radio" label="2"
                                text-color="#333333" fill="#fa7500">邀请房间</el-radio>
                        </div>
                    </div>
                    <div class="createScreen_content_l_c_y" v-if="radio == 2">
                        <div class="createScreen_content_l_c_y_t">同屏邀请</div>
                        <div class="createScreen_content_l_c_y_r" @click.stop.prevent="getPersonFn(0)">
                            <el-input class="createScreen_content_l_c_y_r_i" v-model="input" placeholder="请选择"
                                suffix-icon="el-icon-arrow-right" readonly></el-input>
                        </div>
                    </div>
                    <div class="createScreen_content_l_c_p">
                        <div class="createScreen_content_l_c_p_t">同屏密码</div>
                        <div class="createScreen_content_l_c_p_r">
                            <el-switch v-model="value" active-color="#fa7500" inactive-color="#cccccc">
                            </el-switch>
                        </div>
                    </div>
                    <div class="createScreen_content_l_c_n" @click.stop.prevent="openScreenFn">开启同屏</div>
                </div>
                <div v-else class="createScreen_content_l_o">
                    <div class="createScreen_content_l_o_c">
                        <div class="createScreen_content_l_o_c_l">
                            <div class="createScreen_content_l_o_c_l_t">
                                <span>链接码</span>
                                <span>{{ openScreenMsg.RoomNo }}</span>
                            </div>
                            <div class="createScreen_content_l_o_c_l_b" v-if="openScreenMsg.RoomPassword">
                                <span>密&nbsp;&nbsp;&nbsp;码</span>
                                <span>{{ openScreenMsg.RoomPassword }}</span>
                            </div>
                        </div>
                        <div class="createScreen_content_l_o_c_r">
                            <qriously :value="screenCode" :size="100" />
                        </div>
                    </div>
                    <div class="createScreen_content_l_o_b">
                        <div @click.stop.prevent="getPersonFn(1)" v-if="radio == 1">分享同屏</div>
                        <!-- <div @click.stop.prevent="getPersonFn(2)">分享同屏</div> -->
                        <div @click.stop.prevent="overScreenFn">结束同屏</div>
                    </div>
                </div>
            </div>
            <div class="createScreen_content_r">
                <div class="createScreen_content_r_t">
                    <div class="createScreen_content_r_t_t">在线人员</div>
                    <div v-if="isCreateScreen && radio == 2" class="createScreen_content_r_t_p"
                        @click.stop.prevent="getPersonFn(2)">
                        <img src="static/image/screen/invite_personnel.png" />
                        <div class="createScreen_content_r_t_p_t">邀请</div>
                    </div>
                </div>
                <!-- 邀请房间 直接邀请进入的人员 -->
                <div v-if="$store.state.screenObj && radio == 2" class="createScreen_content_r_c">
                    <div class="createScreen_content_r_c_t">
                        <div :class="{ createScreen_content_r_c_t_cg: flag == 0 }" @click.stop.prevent="getLine(0)">
                            {{ `在线（${personListOnline.length}）` }}</div>
                        <div :class="{ createScreen_content_r_c_t_cg: flag == 1 }" @click.stop.prevent="getLine(1)">
                            {{ `不在线（${personListOffline.length}）` }}</div>
                    </div>
                    <div class="createScreen_content_r_c_c">
                        <div class="createScreen_content_r_c_c_item"
                            v-for="(personListItem, index) in (flag == 0 ? personListOnline : personListOffline)"
                            :key="index + 'personList'">
                            <div class="createScreen_content_r_c_c_item_l">
                                <img :class="{ gray: personListItem.status == 7 }" draggable="false"
                                    :src="!$isNull(personListItem.head) ? (`${$store.state.headPathUrl}${personListItem.id}${personListItem.head}.PNG`) : `static/image/home/person_${personListItem.gender == 2 ? 2 : 1}.png`"
                                    :onerror="defaultImg" />
                                <div>{{ personListItem.name }}</div>
                            </div>
                            <div class="createScreen_content_r_c_c_item_r"
                                @click.stop.prevent="delPersonFn(personListItem)"></div>
                        </div>
                    </div>
                </div>
                <!-- 公共房间 分享同屏 加入的人员 -->
                <div v-else-if="commonPersonList.length && radio == 1" class="createScreen_content_r_c">
                    <div class="createScreen_content_r_c_c">
                        <div class="createScreen_content_r_c_c_item"
                            v-for="(commonPersonListItem, index) in commonPersonList" :key="index + 'commonPersonList'">
                            <div class="createScreen_content_r_c_c_item_l">
                                <img :src="!$isNull(commonPersonListItem.Head)
                                ?
                                (`${$store.state.headPathUrl}${commonPersonListItem.ClientID.split('_')[0]}${commonPersonListItem.Head}.PNG`)
                                :
                                `static/image/home/person_${commonPersonListItem.Gender == 2 ? 2 : 1}.png`"
                                    :onerror="defaultImg" />
                                <div>{{ commonPersonListItem.Username }}</div>
                            </div>
                            <div class="createScreen_content_r_c_c_item_r"
                                @click.stop.prevent="delPersonFn(commonPersonListItem)"></div>
                        </div>
                    </div>
                </div>
                <div v-else class="createScreen_content_r_c close">
                    <img src="static/image/screen/no_personnel.png" />
                    <div>暂无人员</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        screenPersonList: {// 同屏邀请
            type: Array,
            default: () => {
                return []
            }
        },
        isUpdateUser: {
            type: Boolean,
            default: false
        },
        list: {// 更新加入房间的人数
            type: Array,
            default: () => {
                return []
            }
        },
        globalOverScreen: {
            type: Boolean,
            default: false
        },
        flag: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            defaultImg: 'this.src="static/image/home/person_1.png"',
            radio: "1",
            value: false,
            personListOnline: [],
            personListOffline: [],
            personIDList: [],
            commonPersonList: [],
            inviterList: [],
            isCreateScreen: false,
            personFlag: 0,
            input: null,
            screenCode: "",
            openScreenMsg: null,
            loadingShow: false,
            loadingTime: null,
            reConnect: null
        }
    },
    computed: {
        myInfo() {
            return this.$store.state.myInfo;
        },
        ws() {
            return this.$store.state.ws;
        },
        oldScreenPersonList() {
            return this.$store.state.oldScreenPersonList
        },
        connectionState() {
            return this.$store.state.connectShareScreenServer
        }
    },
    watch: {
        screenPersonList: {
            handler(newval, oldval) {
                console.log(newval, this.personFlag, "选中的人或者部门")
                this.personIDList = [];
                if (this.personFlag == 0) {// 同屏设置邀请人
                    if (this.screenPersonList.length) {
                        for (let i in this.screenPersonList) {
                            this.personIDList.push(this.screenPersonList[i].id);
                        }
                        this.input = this.screenPersonList.length + "人";
                    } else this.input = null;
                } else if (this.personFlag == 1) {// 分享同屏

                } else if (this.personFlag == 2) {// 同屏设置成功后邀请人
                    console.log(this.isUpdateUser, "isUpdateUser")
                    if (this.isUpdateUser) {//邀请失效,this.isUPdateUser一直是false
                        this.inviterList = [].concat(this.screenPersonList);
                        for (let i in this.inviterList) {
                            for (let j in this.oldScreenPersonList) {
                                if (this.inviterList[i].id == this.oldScreenPersonList[j].id) {
                                    this.inviterList.splice(i, 1);
                                    break;
                                }
                            }
                        }
                        console.log(this.inviterList, '邀请的人')
                        this.inviterList.map(item => this.personIDList.push(item.id));
                        let info = this.$ShareScreenAssistance("UpdateInvitedUser", [this.openScreenMsg.RoomNo, "2", this.personIDList.join(","), true]);
                        info = JSON.parse(info);
                        if (info.return_code === "FALSE") {
                            this.$message({
                                message: info.return_msg,
                                type: "warning"
                            })
                        }
                    }
                }
                this.personFlag = 3
                if (this.connectionState) {
                    console.log('在变了');
                    this.personListOnline = this.screenPersonList.filter(item => item.status != 7);
                    this.personListOffline = this.screenPersonList.filter(item => item.status == 7);
                    this.$forceUpdate();
                }
            },
            deep: true,
        },
        list() {
            console.log(this.list, '监听人员加入')
            for (let i in this.list) {
                if (this.list[i].ClientID.split("_")[0] == this.myInfo.id) {
                    this.list.splice(i, 1);
                    break;
                } else {
                    this.list[i]["id"] = this.list[i].ClientID.split("_")[0];
                    this.list[i]["name"] = this.list[i].Username;
                }
            }
            this.commonPersonList = this.list;
        },
        // 15s后无返回init加载状态
        loadingShow() {
            if (this.loadingShow) {
                this.loadingTime = setTimeout(() => {
                    this.loadingShow = false;
                    this.$message({
                        message: "连接超时，请稍后再试",
                        type: "warning"
                    })
                }, 1000 * 15)
            } else {
                this.loadingTime && clearTimeout(this.loadingTime);
            }
        },
        globalOverScreen() {
            if (this.flag == 0 && this.globalOverScreen && this.$store.state.screenRoomNo && this.$store.state.screenObj) {
                this.overScreenFn();
                // 重置全局结束同屏参数
                this.$emit("globalOverScreenFn");
                // 页面初始化
                this.$emit("onlyScreen", 3);
                // init同屏参数
                this.$store.state.screenObj = null;
                // init链接码
                this.$store.state.screenRoomNo = null;
            }
        }
    },
    methods: {
        // 删除人员
        delPersonFn(personListItem) {
            console.log(personListItem, "删除的那个人")
            this.personFlag = 0;
            let leaveUserId = personListItem.ClientID ? personListItem.ClientID : personListItem.id + "_PC";//zk0528修改,有ClientID就用ClientID,无ClientID字段,改用id+_PC
            let info = this.$ShareScreenAssistance("PleaseUserLeave", [this.openScreenMsg.RoomNo, leaveUserId]);
            info = JSON.parse(info);
            if (info.return_code === "FALSE") {
                this.$message({
                    message: info.return_msg,
                    type: "warning"
                })
            } else if (info.return_code === "TRUE") {
                if (this.flag == 0) {
                    for (let i in this.screenPersonList) {
                        if (this.screenPersonList[i].name == personListItem.name) {
                            this.screenPersonList.splice(i, 1);
                            break;
                        }
                    }
                    for (let i in this.list) {
                        if (this.list[i].name == personListItem.name) {
                            this.list.splice(i, 1);
                            break;
                        }
                    }
                    this.personListOnline = this.screenPersonList.filter(item => item.status != 7);
                } else {
                    for (let i in this.screenPersonList) {
                        if (this.screenPersonList[i].name == personListItem.name) {
                            this.screenPersonList.splice(i, 1);
                            break;
                        }
                    }
                    for (let i in this.list) {
                        if (this.list[i].name == personListItem.name) {
                            this.list.splice(i, 1);
                            break;
                        }
                    }
                    this.personListOffline = this.screenPersonList.filter(item => item.status == 7);
                }
            }
        },
        // 切换在线离线人员
        getLine(flag) {
            this.flag = flag;
            if (flag == 0) {
                // 在线
                this.personListOnline = this.screenPersonList.filter(item => item.status != 7);
            } else {
                // 离线
                this.personListOffline = this.screenPersonList.filter(item => item.status == 7);
            }
        },
        // 同屏邀请
        getPersonFn(index) {
            this.$store.state.oldScreenPersonList = [].concat(this.screenPersonList);
            this.personFlag = index;
            this.$emit("getPersonFn", {
                flag: index,
                list: this.screenPersonList,
                room: this.openScreenMsg
            });
        },
        // 开启同屏
        openScreenFn() {
            if (!this.connectionState) {
                this.$message({
                    message: '同屏服务重连中，请稍后重试',
                    type: "warning"
                })
                return
            }
            this.loadingShow = true;
            setTimeout(() => {
                let info;
                if (this.radio == 2) {
                    if (this.personIDList.length) {
                        info = this.$ShareScreenAssistance("ShareScreen", [`${this.myInfo.id}`, "2", this.personIDList.join(","), this.value ? 1 : 0, false, true]);
                    } else {
                        info = this.$ShareScreenAssistance("ShareScreen", [`${this.myInfo.id}`, "2", "", this.value ? 1 : 0, false, false]);
                    }
                } else {
                    console.log('else');
                    this.screenPersonList = []
                    info = this.$ShareScreenAssistance("ShareScreen", [`${this.myInfo.id}`, "2", "", this.value ? 1 : 0, true, false]);
                }
                info = JSON.parse(info);
                if (info.return_code === "FALSE") {
                    this.$message({
                        message: info.return_msg,
                        type: "warning"
                    })
                }
            }, 600)
        },
        // 开启同屏接口返回
        getShareScreen(Code, Explain, ClientID, Users, RoomNo, RoomPassword, IsShare) {
            this.loadingShow = false;
            if (Code == 0) {
                this.openScreenMsg = {
                    ClientID: ClientID,
                    Users: Users,
                    RoomNo: RoomNo,
                    RoomPassword: RoomPassword,
                    IsShare: IsShare
                };
                // 二维码生成规则
                this.screenCode = RoomPassword ? `netscreen_${RoomNo}_${RoomPassword}` : `netscreen_${RoomNo}`;
                this.personListOnline = this.screenPersonList.filter(item => item.status != 7);
                this.personListOffline = this.screenPersonList.filter(item => item.status == 7);
                this.isCreateScreen = true;
                // 发送同屏邀请消息
                for (let i in this.screenPersonList) {
                    this.$wsSendMsg(this.screenPersonList[i], this.$func.uuid(), 'screen', {
                        text: this.openScreenMsg ? JSON.stringify(this.openScreenMsg) : "",
                        gender: this.myInfo.gender || "1",
                        head: this.myInfo.headImage || "",
                    }, this.ws);
                }
                this.$emit("onlyScreen", 0);
                // 存储同屏参数
                this.$store.state.screenObj = this.openScreenMsg;
                // 存储链接码
                this.$store.state.screenRoomNo = RoomNo;
                console.log(this.openScreenMsg, '开启同屏接口返回')
            } else {
                this.$message({
                    message: Explain,
                    type: "warning"
                })
            }
        },
        // 结束同屏
        overScreenFn() {
            this.loadingShow = true;
            setTimeout(() => {
                let info = this.$ShareScreenAssistance("LeaveRoom", [`${this.myInfo.id}`, this.openScreenMsg.RoomNo]);
                info = JSON.parse(info);
                if (info.return_code === "FALSE") {
                    this.$message({
                        message: info.return_msg,
                        type: "warning"
                    })
                }
                // 清除加入当前房间的人数
                this.$emit("closeJoinList");
                this.input = null
            }, 600)
        },
        // 结束同屏接口返回
        endShareScreen(ClientID, RoomNo) {
            this.loadingShow = false;
            console.log(ClientID, RoomNo, '结束同屏接口返回create')
            if (ClientID && ClientID == `${this.myInfo.id}_PC`) {// 房主是自己时
                this.personListOnline = this.personListOffline = [];
                this.isCreateScreen = false;
                this.$emit("onlyScreen", 3);
                // init同屏参数
                this.$store.state.screenObj = null;
                // init链接码
                this.$store.state.screenRoomNo = null;
            } else if (ClientID && ClientID != `${this.myInfo.id}_PC`) {// 房主是他人时
                // 当前同屏房间已关闭时
                this.$emit("overRoomFn", RoomNo);
            }
        },
        // 邀请人员接口返回
        getUpdateInvitedUser(Code, Explain) {
            if (Code == 0) {
                this.personListOnline = this.screenPersonList.filter(item => item.status != 7);
                this.personListOffline = this.screenPersonList.filter(item => item.status == 7);
                // 发送同屏邀请消息
                for (let i in this.inviterList) {
                    this.$wsSendMsg(this.inviterList[i], this.$func.uuid(), 'screen', {
                        text: this.openScreenMsg ? JSON.stringify(this.openScreenMsg) : "",
                        gender: this.myInfo.gender || "1",
                        head: this.myInfo.headImage || "",
                    }, this.ws);
                }
            } else {
                this.$message({
                    message: Explain,
                    type: "warning"
                })
            }
        },
    },
    created() {
        // 开启同屏接口返回
        window.getShareScreen = this.getShareScreen;
        // 结束同屏接口返回(房主)
        window.endShareScreen = this.endShareScreen;
        // 邀请人员接口返回
        window.getUpdateInvitedUser = this.getUpdateInvitedUser;
    },
    mounted() {//zk0528新增初始化
        // 勾选初始化,默认选中上次选中的人
        if (this.personFlag == 0) {// 同屏设置邀请人
            if (this.screenPersonList.length) {
                for (let i in this.screenPersonList) {
                    this.personIDList.push(this.screenPersonList[i].id);
                }
                this.input = this.screenPersonList.length + "人";
            } else this.input = null;
        }
        console.log(this.screenPersonList, this.personFlag, this.oldScreenPersonList)
    }
}
</script>
<style lang="less" scoped>
.createScreen {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 0 16px;

    .createScreen_content {
        flex: 1;
        display: flex;

        .createScreen_content_l,
        .createScreen_content_r {
            padding-left: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            background: #ffffff;

            .createScreen_content_l_t {
                height: 40px;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: #333333;
                font-weight: bold;
            }

            .createScreen_content_l_c {
                padding: 0 30px 0 10px;

                .createScreen_content_l_c_t,
                .createScreen_content_l_c_p,
                .createScreen_content_l_c_y {
                    display: flex;
                    height: 56px;
                    align-items: center;
                    border-bottom: 1px solid #e6e6e6;

                    .createScreen_content_l_c_t_t,
                    .createScreen_content_l_c_p_t,
                    .createScreen_content_l_c_y_t {
                        width: 170px;
                        font-size: 14px;
                        color: #666;
                    }

                    .createScreen_content_l_c_y_r {
                        width: 80px;
                    }
                }

                .createScreen_content_l_c_n {
                    margin-top: 20px;
                    width: 120px;
                    height: 36px;
                    font-size: 14px;
                    color: #ffffff;
                    border-radius: 4px;
                    background: #fa7500;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }

            .createScreen_content_l_o {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 40px;

                .createScreen_content_l_o_c {
                    width: 320px;
                    height: 140px;
                    border: 1px solid #dddddd;
                    border-radius: 4px;
                    display: flex;
                    align-items: center;
                    padding: 0 20px;
                    justify-content: space-between;

                    .createScreen_content_l_o_c_l {
                        height: 80px;
                        flex: 1;
                        margin-right: 15px;
                        border-right: 1px solid #dddddd;

                        div {
                            height: 40px;
                            display: flex;
                            align-items: center;

                            span:first-of-type {
                                font-size: 14px;
                                color: #666666;
                                margin-right: 15px;
                            }

                            span:nth-of-type(2) {
                                font-size: 16px;
                                color: #333333;
                                font-weight: bold;
                            }
                        }
                    }

                    .createScreen_content_l_o_c_r {
                        div {
                            width: 100px;
                            height: 100px;
                        }
                    }
                }

                .createScreen_content_l_o_b {
                    display: flex;
                    margin-top: 30px;

                    div {
                        width: 120px;
                        height: 36px;
                        background: #ff4545;
                        border-radius: 4px;
                        font-size: 14px;
                        color: #ffffff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                    }

                    div:first-of-type {
                        background: #fa7500;
                        margin-right: 40px;
                    }
                }
            }
        }

        .createScreen_content_l {
            flex: 1;
            width: 66%;
            margin-right: 16px;
        }

        .createScreen_content_r {
            width: 33%;
            padding-right: 20px;
            display: flex;
            flex-direction: column;

            .createScreen_content_r_t {
                display: flex;
                height: 40px;
                align-items: center;
                justify-content: space-between;

                .createScreen_content_r_t_t {
                    font-size: 14px;
                    color: #333333;
                    font-weight: bold;
                }

                .createScreen_content_r_t_p {
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    img {
                        width: 14px;
                        height: 14px;
                        margin-right: 6px;
                        margin-top: 2px;
                    }

                    div {
                        font-size: 14px;
                        color: #fa7500;
                    }
                }
            }

            .createScreen_content_r_c {
                flex: 1;
                display: flex;
                flex-direction: column;

                .createScreen_content_r_c_t {
                    height: 32px;
                    border: 1px solid #dddddd;
                    border-radius: 16px;
                    display: flex;
                    margin-bottom: 10px;

                    div {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        height: 32px;
                        align-items: center;
                        font-size: 12px;
                        color: #222222;
                        font-weight: bold;
                        cursor: pointer;
                    }

                    div:first-of-type {
                        border-right: 1px solid #dddddd;
                    }

                    .createScreen_content_r_c_t_cg {
                        color: #fa7500;
                    }
                }

                .createScreen_content_r_c_c {
                    flex: 1;
                    overflow-y: scroll;
                    height: 1px;

                    .createScreen_content_r_c_c_item {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 40px;
                        padding: 0 10px;

                        .createScreen_content_r_c_c_item_l {
                            display: flex;

                            img {
                                width: 24px;
                                height: 24px;
                                border-radius: 4px;
                                margin-right: 10px;
                            }

                            div {
                                font-size: 14px;
                                color: #333333;
                            }
                        }
                    }

                    .createScreen_content_r_c_c_item:hover {
                        background: #eeeeee;

                        .createScreen_content_r_c_c_item_r {
                            width: 10px;
                            height: 10px;
                            background: url("../../../../static/image/screen/personnel_del.png");
                            cursor: pointer;
                        }
                    }
                }
            }

            .createScreen_content_r_c.close {
                display: flex;
                align-items: center;
                flex-direction: column;
                margin-top: 80px;

                img {
                    margin-bottom: 15px;
                }

                div {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }
}
</style>
<style lang="less">
.createScreen_content_l_c_y_r_i {
    input {
        border: unset !important;
        padding-left: 0 !important;
        cursor: pointer;
    }
}

.createScreen_content_l_c_t_r_my {
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #fa7500 !important;
        background: #fa7500 !important;
    }

    .el-radio__input.is-checked+.el-radio__label {
        color: #fa7500 !important;
    }

    .el-radio__inner:hover {
        border: 1px solid #fa7500 !important;
    }
}

.createScreen_content_l_c_y_r {
    input {
        height: 36px !important;
        line-height: 36px !important;
    }

    input:focus {
        border: 1px solid #fa7500 !important;
    }

    .el-input__suffix {
        top: -1px !important;
    }

    .createScreen_content_l_c_y_r_i {
        input:focus {
            border: unset !important;
        }
    }
}
</style>